<template>
  <div class="empty" ref="emptyRef">
    <svg ref="svgRef" :style="svgStyle" t="1752039653337" class="empty-icon" viewBox="0 0 1024 1024" version="1.1"
      xmlns="http://www.w3.org/2000/svg" p-id="8143">
      <path
        d="M537.096533 187.682133C633.736533 91.042133 790.4256 91.042133 887.0656 187.682133c96.648533 96.64 96.648533 253.329067 0 349.969067a246.459733 246.459733 0 0 1-94.4128 59.050667 178.688 178.688 0 0 1 45.1072 32.8704c69.981867 69.981867 69.981867 183.4496 0 253.431466-69.973333 69.973333-183.441067 69.973333-253.422933 0l-0.469334-0.469333 0.648534 0.4608-10.871467-7.790933a1508.241067 1508.241067 0 0 0-127.274667-81.186134c-46.728533-26.581333-99.899733-46.788267-159.5136-60.603733-57.079467 13.499733-119.611733-2.005333-164.1216-46.5152A174.6688 174.6688 0 0 1 88.789333 639.146667c-35.566933-67.6352-24.917333-153.233067 31.965867-210.107734a178.466133 178.466133 0 0 1 109.636267-51.677866l-0.059734-0.128 2.884267-0.110934c4.181333-0.341333 8.362667-0.520533 12.552533-0.554666 79.940267-3.933867 139.733333-14.779733 179.370667-32.529067 12.714667-5.691733 27.025067-13.2864 42.948267-22.801067a246.340267 246.340267 0 0 1 69.009066-133.5552z"
        fill="#F7F7F7" p-id="8144"></path>
      <path
        d="M533.333333 134.0672L254.7968 294.8864a25.6 25.6 0 0 0-12.8 22.1696v321.621333a25.6 25.6 0 0 0 12.8 22.1696L533.333333 821.674667a25.6 25.6 0 0 0 25.6 0l278.536534-160.8192a25.6 25.6 0 0 0 12.8-22.1696v-321.621334a25.6 25.6 0 0 0-12.8-22.1696L558.933333 134.058667a25.6 25.6 0 0 0-25.6 0z m17.066667 14.779733L828.936533 309.674667a8.533333 8.533333 0 0 1 4.266667 7.389866v321.621334a8.533333 8.533333 0 0 1-4.266667 7.389866L550.4 806.8864a8.533333 8.533333 0 0 1-8.533333 0L263.330133 646.058667a8.533333 8.533333 0 0 1-4.266666-7.389867v-321.621333a8.533333 8.533333 0 0 1 4.266666-7.389867L541.866667 148.846933a8.533333 8.533333 0 0 1 8.533333 0z"
        fill="#2F326A" p-id="8145"></path>
      <path
        d="M554.666667 252.3904l182.468266 105.352533a17.066667 17.066667 0 0 1 8.533334 14.779734v210.688a17.066667 17.066667 0 0 1-8.533334 14.779733L554.666667 703.342933a17.066667 17.066667 0 0 1-17.066667 0L355.131733 597.9904a17.066667 17.066667 0 0 1-8.533333-14.779733v-210.688a17.066667 17.066667 0 0 1 8.533333-14.779734L537.6 252.3904a17.066667 17.066667 0 0 1 17.066667 0z"
        fill="#B4B9FF" p-id="8146"></path>
      <path
        d="M546.133333 708.266667V475.818667L346.5984 368.238933v214.9632a17.066667 17.066667 0 0 0 8.533333 14.779734L546.133333 708.266667z"
        fill="#9B68FF" p-id="8147"></path>
      <path
        d="M546.133333 708.266667V475.818667l186.794667-105.924267a8.533333 8.533333 0 0 1 12.740267 7.424v205.892267a17.066667 17.066667 0 0 1-8.533334 14.779733L546.133333 708.266667z"
        fill="#6973FF" p-id="8148"></path>
      <path
        d="M546.133333 136.533333a8.533333 8.533333 0 0 1 8.533334 8.533334v80.5888a8.533333 8.533333 0 1 1-17.066667 0V145.066667a8.533333 8.533333 0 0 1 8.533333-8.533334zM546.133333 725.333333a8.533333 8.533333 0 0 1 8.533334 8.533334v80.5888a8.533333 8.533333 0 1 1-17.066667 0V733.866667a8.533333 8.533333 0 0 1 8.533333-8.533334z"
        fill="#2F326A" p-id="8149"></path>
      <path
        d="M246.8352 309.333333a8.533333 8.533333 0 0 0 3.1232 11.656534l69.794133 40.2944a8.533333 8.533333 0 1 0 8.533334-14.779734l-69.794134-40.2944a8.533333 8.533333 0 0 0-11.656533 3.1232zM756.753067 603.733333a8.533333 8.533333 0 0 0 3.1232 11.656534l69.794133 40.2944a8.533333 8.533333 0 1 0 8.533333-14.779734l-69.802666-40.2944a8.533333 8.533333 0 0 0-11.648 3.1232z"
        fill="#2F326A" p-id="8150"></path>
      <path
        d="M845.431467 309.333333a8.533333 8.533333 0 0 1-3.1232 11.656534l-69.794134 40.2944a8.533333 8.533333 0 1 1-8.533333-14.779734l69.794133-40.2944a8.533333 8.533333 0 0 1 11.656534 3.1232zM335.5136 603.733333a8.533333 8.533333 0 0 1-3.1232 11.656534l-69.794133 40.2944a8.533333 8.533333 0 1 1-8.533334-14.779734l69.802667-40.2944a8.533333 8.533333 0 0 1 11.648 3.1232z"
        fill="#2F326A" p-id="8151"></path>
      <path d="M264.533333 776.533333m-25.6 0a25.6 25.6 0 1 0 51.2 0 25.6 25.6 0 1 0-51.2 0Z" fill="#9B68FF"
        p-id="8152"></path>
      <path d="M913.066667 256m-25.6 0a25.6 25.6 0 1 0 51.2 0 25.6 25.6 0 1 0-51.2 0Z" fill="#FFD868" p-id="8153">
      </path>
      <path
        d="M311.466667 132.266667m-46.933334 0a46.933333 46.933333 0 1 0 93.866667 0 46.933333 46.933333 0 1 0-93.866667 0Z"
        fill="#B4B9FF" p-id="8154"></path>
    </svg>
    <span class="empty-text">{{ text }}</span>
  </div>
</template>

<script setup>
const props = defineProps({
  tableEmpty: {
    type: Boolean,
    default: false
  },
  text: {
    type: String,
    default: '暂无数据'
  }
});

const svgStyle = { width: props.tableEmpty ? '100px' : 'calc(min(100%, 100%) * 0.3)', height: 'auto' };
</script>

<style lang="scss" scoped>
.empty {
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--ycy-gap-base);
  --empty-icon-transform: translateX(-4px);

  &-icon {
    display: flex;
    justify-content: center;
    transform: var(--empty-icon-transform);
    animation: scaleAnimation 2s infinite var(--el-transition-function-ease-in-out-bezier);
  }

  &-text {
    line-height: 1;
    font-size: var(--el-font-size-small);
    color: var(--el-text-color-secondary);
  }

  @keyframes scaleAnimation {
    0% {
      transform: scale(1) var(--empty-icon-transform);
    }

    50% {
      transform: scale(1.1) var(--empty-icon-transform);
    }

    100% {
      transform: scale(1) var(--empty-icon-transform);
    }
  }
}
</style>